import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import { useState } from 'react'
import { Autoplay, Navigation } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react'
import { EnclosureDetails } from './TextList'
import { useBoolean } from 'ahooks'
import { Video } from '../../../../Common/Configure/Video'
import { Player, BigPlayButton } from 'video-react'
import { useNavigate } from 'react-router-dom'

import Carousel3d from './Carousel3d'
import { ICON } from '../../../../Common/Configure/Icon'

export const StoneSwiperBox = ({ className, data }) => {
    const [EnclosureDetailsUrl, setEnclosureDetailsUrl] = useState()
    const [EnclosureDetailsState, { setTrue, setFalse }] = useBoolean(false)
    const [VideoSelect, setVideoSelect] = useState(0)
    const [VideoData] = useState(data)
    const SwiperScale = swiper => {
        const { realIndex } = swiper
        setVideoSelect(realIndex)
    }
    const SwiperInitialization = slides => {
        slides.forEach(key => {
            let modify = 1
            if (Math.abs(key.progress) > 1) modify = (Math.abs(key.progress) - 1) * 0.3 + 1
            let translate = key.progress * modify * 150 + 'px'
            let scale = 1 - Math.abs(key.progress) / 5
            let zIndex = 999 - Math.abs(Math.round(10 * key.progress))
            key.style.transform = `translateX(${translate}) scale(${scale})`
            key.style.zIndex = zIndex
            key.style.opacity = Math.abs(key.progress) > 3 ? 0 : 1
        })
    }
    return (
        <>
            <Swiper
                className={className}
                modules={[Autoplay]}
                autoplay
                slidesPerView="auto"
                watchSlidesProgress
                centeredSlides
                loop
                loopedSlides={3}
                onSlideChange={swiper => SwiperScale(swiper)}
                onSwiper={swiper => SwiperScale(swiper)}
                onProgress={({ slides }) => SwiperInitialization(slides)}
                onSetTransition={(swiper, e) => {
                    for (var i = 0; i < swiper.slides.length; i++) {
                        var slide = swiper.slides.eq(i)
                        slide.transition(e)
                    }
                }}
            >
                {data.length !== 0 &&
                    data.map((item, index) => (
                        <SwiperSlide
                            key={`bannerSwiper${index}`}
                            onClick={() => {
                                setEnclosureDetailsUrl(item.image)
                                setTrue()
                            }}
                        >
                            <img className="Cover" src={item.image} alt="" />
                        </SwiperSlide>
                    ))}
            </Swiper>
            {data.length !== 0 && <div className="SwiperName">{VideoData[VideoSelect].title}</div>}
            {EnclosureDetailsState && <EnclosureDetails setFalse={setFalse} url={EnclosureDetailsUrl} />}
        </>
    )
}

export const StoneSwiperVertical = ({ className, data }) => {
    const [EnclosureDetailsUrl, setEnclosureDetailsUrl] = useState()
    const [EnclosureDetailsState, { setTrue, setFalse }] = useBoolean(false)
    return (
        <>
            <Swiper
                className={className}
                modules={[Autoplay]}
                direction="vertical"
                autoplay
                loop
                slidesPerView={3}
                spaceBetween={20}
                centeredSlides
            >
                {data.length !== 0 &&
                    data.map((item, index) => (
                        <SwiperSlide
                            key={`bannerSwiper${index}`}
                            onClick={() => {
                                setEnclosureDetailsUrl(item.image)
                                setTrue()
                            }}
                        >
                            <img src={item.image} alt="" />
                            <div className="SwiperName">{item.title}</div>
                        </SwiperSlide>
                    ))}
            </Swiper>
            {EnclosureDetailsState && <EnclosureDetails setFalse={setFalse} url={EnclosureDetailsUrl} />}
        </>
    )
}

// 鹤伊边坡动画
export const SingleList = ({ data }) => {
    return (
        <>
            <Swiper
                modules={[Navigation]}
                navigation
                onSlideChange={({ activeIndex }) => console.log('slide change', activeIndex)}
            >
                {data.length !== 0 &&
                    data.map(({ uuid, fileUrl, tableName }) => (
                        <SwiperSlide key={`bannerSwiper${uuid}`}>
                            <div className="SwiperName">
                                <Player fluid={false} width={'100%'} height={'100%'} src={fileUrl}>
                                    <BigPlayButton position="center" />
                                </Player>
                            </div>
                            <div className="Name">{tableName}</div>
                        </SwiperSlide>
                    ))}
            </Swiper>
        </>
    )
}

// 鹤伊党建
export const PartyBuildingSwiper = ({ data }) => {
    return (
        <Swiper
            modules={[Navigation]}
            navigation
            onSlideChange={({ activeIndex }) => console.log('slide change', activeIndex)}
        >
            {data.map(({ uuid, coverUrl, tableName }) => (
                <SwiperSlide key={`bannerSwiper${uuid}`}>
                    <img src={coverUrl} alt="" />
                    <div className="TableName">{tableName}</div>
                </SwiperSlide>
            ))}
        </Swiper>
    )
}

// 龙督滚动监控
export const ScrollVideo = ({ data }) => {
    return (
        <Swiper
            direction="vertical"
            slidesPerView="auto"
            spaceBetween={16}
            onSlideChange={({ activeIndex }) => console.log('slide change', activeIndex)}
        >
            {data.map(({ uuid, organizationName, deviceSerial, channelNo, tableName, token, cameraFactory }) => (
                <SwiperSlide key={`bannerSwiper${uuid}`}>
                    <div>
                        <Video
                            data={{ deviceSerial, channelNo, tableName, token, cameraFactory }}
                            date={new Date().getTime()}
                            state={true}
                        />
                    </div>
                    <div>
                        <div>{organizationName}</div>
                        <div>{tableName}</div>
                    </div>
                </SwiperSlide>
            ))}
        </Swiper>
    )
}

// 建设中心首页新闻
export const NewsList = ({ data }) => {
    return (
        <>
            <Swiper
                className={`NewsList`}
                modules={[Autoplay]}
                direction="vertical"
                autoplay
                loop
                slidesPerView={2}
                spaceBetween={20}
                centeredSlides
            >
                {data.length !== 0 &&
                    data.map(({ uuid, tableName, coverUrl, currencyA }) => (
                        <SwiperSlide
                            key={`bannerSwiper${uuid}`}
                            onClick={() => {
                                window.open(currencyA)
                            }}
                        >
                            <img className="Cover" src={coverUrl} alt="" />
                            <div>{tableName}</div>
                        </SwiperSlide>
                    ))}
            </Swiper>
        </>
    )
}

export const XNHHomeBox = ({ data }) => {
    const Navigate = useNavigate()
    const NavTo = data => {
        const [{ path }] = data
        Navigate(path)
    }

    const children = data.map(({ path, title, icon, img, child }) => (
        <div key={path} className="img-wrapper" onClick={() => NavTo(child)}>
            {/* <img src={imageUrl + '最大模块.png'} alt="" /> */}
            <div>
                {icon ? ICON[icon] : <img src={img} alt="" />}
                <div>{title}</div>
            </div>
        </div>
    ))

    return (
        <div className="carousel-demo-wrapper">
            <Carousel3d className="carousel-demo" childMaxLength={10}>
                {children}
            </Carousel3d>
        </div>
    )
}
